<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>调用计算属性的set方法</title>
        <style>
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
       <div id="app">
           <p>{{fullName}}</p>
           <button @click="deal()">调用计算属性的setter方法</button>
       </div>
    </body>
</html>
<script>
    //1.创建vue实例
    let vm=new Vue({
        el:'#app',
        data:{
            firstName:'zhang',
            lastName:'sanfeng'
        },
        methods:{
        deal(){
            this.fullName='luch lili'
        }
        },
        computed:{
            // fullName(){
            //     return this.firstName + ' ' + this.lastName;
            // }
            fullName:{
                get(){
                    return this.firstName + ' ' + this.lastName;
                },
                set(str){
                    let nameArr=str.split(' ');
                    this.firstName=nameArr[0];
                    this.lastName=nameArr[1];
                }
            }
        }
    })
</script>